<template>
  <div id="app">
    <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#B3C0D1"
        text-color="#333"
        active-text-color="#ffd04b">
      <el-menu-item index="1">我的商品</el-menu-item>
      <el-submenu index="2">
        <template slot="title">招投标信息</template>
        <el-menu-item index="2-1">采购信息</el-menu-item>
        <el-menu-item index="2-2">中标信息</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">货物管理</template>
        <el-menu-item index="3-1">供货信息</el-menu-item>
        <el-menu-item index="3-2">退货信息</el-menu-item>
      </el-submenu>

      <el-container>
        <el-header style="text-align: right; font-size: 20px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 10px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-button @click="handleClick" type="text">退出登陆</el-button>
              <el-button @click="dialogFormVisible=true" type="text">修改密码</el-button>
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{userName}}</span>
        </el-header>


      </el-container>
    </el-menu>

    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="form1">

        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form1.userName" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="原密码" :label-width="formLabelWidth">
          <el-input v-model="form1.password" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth">
          <el-input v-model="form1.newPassword" autocomplete="off" ></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePassword">确 定</el-button>
      </div>
    </el-dialog>

    <router-view/>
  </div>
</template>



<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
<script>
export default {
  data(){
    return{
      userName:sessionStorage.getItem("userName"),
      form1:{
        userName:sessionStorage.getItem("userName"),
        password:'',
        newPassword:''
      },
      dialogFormVisible:false,
      formLabelWidth:'80px'
    }
  },
  mounted() {

    },
  methods:{
    handleSelect(key){
      let user = sessionStorage.getItem("userNumber");
      if(user!=null){
        if(key==="1"){
          this.userName=sessionStorage.getItem("userName")
          this.$router.push("GoodsView")
        }else if(key==="2-1"){
          this.userName=sessionStorage.getItem("userName")
          this.$router.push("BuyView")
        }else if(key==="2-2"){
          this.userName=sessionStorage.getItem("userName")
          this.$router.push("BidView")
        }else if(key==="3-1"){
          this.userName=sessionStorage.getItem("userName")
          this.$router.push("OrderView")
        }else if(key==="3-2"){
          this.userName=sessionStorage.getItem("userName")
          this.$router.push("ReturnsView")
        }
      }else {
        this.$message.error("请先登陆")
        this.$router.push("LoginView")
      }

    },handleClick(){
    this.$router.push("LoginView")
    sessionStorage.clear()
    },
    changePassword(){
      this.$axios.get("/psc/sys-user/changePassword/"+sessionStorage.getItem("userName")+"/"+this.form1.password+"/"+this.form1.newPassword).then(
          r=>{
            this.$message.info(r.data)
            this.dialogFormVisible=false
          }
      )
    }
  }
}
</script>
